.ant-btn {
  // blue button
  &.bui-btn-blue {
    color: @bui-btn-blue-color;
    background-color: @bui-btn-blue-background;
    border: 0;

    &:hover {
      color: fade(@bui-btn-blue-color, 90%);
      background-color: fade(@bui-btn-blue-background, 90%);
    }

    &:disabled {
      color: @bui-btn-blue-disabled-color;
      background-color: @bui-btn-blue-disabled-background-color;
    }
  }

  // red button
  &.bui-btn-red {
    color: @bui-btn-red-color;
    background-color: @bui-btn-red-background;
    border: 0;

    &:hover {
      color: fade(@bui-btn-red-color, 90%);
      background-color: fade(@bui-btn-red-background, 90%);
    }

    &:disabled {
      color: @bui-btn-red-disabled-color;
      background-color: @bui-btn-red-disabled-background-color;
    }
  }

  // orange button
  &.bui-btn-orange {
    color: @bui-btn-orange-color;
    background-color: @bui-btn-orange-background;
    border: 0;

    &:hover {
      color: fade(@bui-btn-orange-color, 90%);
      background-color: fade(@bui-btn-orange-background, 90%);
    }

    &:disabled {
      color: @bui-btn-orange-disabled-color;
      background-color: @bui-btn-orange-disabled-background-color;
    }
  }

  // green button
  &.bui-btn-green {
    color: @bui-btn-green-color;
    background-color: @bui-btn-green-background;
    border: 0;

    &:hover {
      color: fade(@bui-btn-green-color, 90%);
      background-color: fade(@bui-btn-green-background, 90%);
    }

    &:disabled {
      color: @bui-btn-green-disabled-color;
      background-color: @bui-btn-green-disabled-background-color;
    }
  }

  // white-normal button
  &.bui-btn-white-normal {
    color: @bui-btn-white-two-color;
    border-color: @bui-btn-white-two-border-color;
    background-color: @bui-btn-white-background-color;

    &:hover {
      color: @bui-btn-white-color--hover;
      border-color: @bui-btn-white-border-color--hover;
      background-color: @bui-btn-white-two-background--hover;
    }

    &:disabled {
      color: @bui-btn-white-color--disabled;
      border-color: @bui-btn-white-background-color--disabled;
      background-color: @bui-btn-white-border-color--disabled;
    }
  }

  // grey button
  &.bui-btn-white-grey {
    color: @bui-btn-white-one-color;
    border-color: @bui-btn-white-one-border-color;
    background-color: @bui-btn-white-background-color;

    &:hover {
      color: @bui-btn-white-color--hover;
      border-color: @bui-btn-white-border-color--hover;
      background-color: @bui-btn-white-one-background--hover;
    }

    &:disabled {
      color: @bui-btn-white-color--disabled;
      border-color: @bui-btn-white-background-color--disabled;
      background-color: @bui-btn-white-border-color--disabled;
    }
  }

  // colorful blue button
  &.bui-btn-colorful-blue {
    color: @bui-btn-colorBlue-color;
    border-color: @bui-btn-colorBlue-border-color;
    background-color: @bui-btn-colorBlue-background-color;

    &:hover {
      color: @bui-btn-blue-color;
      background-color: @bui-btn-blue-background;
    }

    &:disabled {
      color: @bui-btn-white-color--disabled;
      border-color: @bui-btn-white-border-color--disabled;
      background-color: @bui-btn-white-background-color--disabled;
    }
  }

  // colorful blue button
  &.bui-btn-colorful-red {
    color: @bui-btn-colorRed-color;
    border-color: @bui-btn-colorRed-border-color;
    background-color: @bui-btn-colorRed-background-color;

    &:hover {
      color: @bui-btn-red-color;
      background-color: @bui-btn-red-background;
    }

    &:disabled {
      color: @bui-btn-white-color--disabled;
      border-color: @bui-btn-white-border-color--disabled;
      background-color: @bui-btn-white-background-color--disabled;
    }
  }

  // colorful orange button
  &.bui-btn-colorful-orange {
    color: @bui-btn-colorOrange-color;
    border-color: @bui-btn-colorOrange-border-color;
    background-color: @bui-btn-colorOrange-background-color;

    &:hover {
      color: @bui-btn-orange-color;
      background-color: @bui-btn-orange-background;
    }

    &:disabled {
      color: @bui-btn-white-color--disabled;
      border-color: @bui-btn-white-border-color--disabled;
      background-color: @bui-btn-white-background-color--disabled;
    }
  }

  // colorful orange button
  &.bui-btn-colorful-green {
    color: @bui-btn-colorGreen-color;
    border-color: @bui-btn-colorGreen-border-color;
    background-color: @bui-btn-colorGreen-background-color;

    &:hover {
      color: @bui-btn-green-color;
      background-color: @bui-btn-green-background;
    }

    &:disabled {
      color: @bui-btn-white-color--disabled;
      border-color: @bui-btn-white-border-color--disabled;
      background-color: @bui-btn-white-background-color--disabled;
    }
  }

  // icon button
  &.bui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
